import React, { useState } from 'react';
import { Form, Input, Modal, Radio,Select} from 'antd';
import { queryDeviceList } from '@/services/device';
import SelectDeviceModal from '@/pages/authority/deviceattr/components/selectDeviceModal';

const FormItem = Form.Item;
const { Option } = Select;
interface CreateFormProps {
  modalVisible: boolean;
  onSubmit: (values: API.DeviceLinkageItem,resetForm:()=>void) => void;
  onCancel: () => void;
  getAttrData: (id:number,type:number) => API.SysDeviceAttrItem;
  deviceList?:API.DeviceItem[];
}



const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

//数字比较符
var symbolValueEnum=['>','>='];
  

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const [formVals] = useState<API.DeviceLinkageRuleItem>({
    useState: 1,
    valueRole: '高于',
    andOr:'and'

  });

  const [form] = Form.useForm();

  const { modalVisible, onSubmit: handleAdd, onCancel,getAttrData,deviceList } = props;
  
  const [selectDeviceModalVisible, handleDeviceModalVisible] = useState<boolean>(false);
  // const [deviceId,setDeviceId] = useState<number>();
  // const [deviceName,setDeviceName] = useState<number>();
  const [attrList,setAttrList] = useState<API.SysDeviceAttrItem>([]);
  const [valueRole,setValueRole] = useState<string>('高于');
  const [symbolEnum,setSymbolEnum] = useState<string[]>(symbolValueEnum);
  

  const [selectedKeys,setSelectedKeys] = useState<string>();
  const [selectedNames,setSelectedNames] = useState<string>();
  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    fieldsValue.ids=selectedKeys;
    fieldsValue.useState=0;
    handleAdd(fieldsValue,resetForm);
  };

  

  const resetForm= async () => {
    setSelectedKeys('');
    setSelectedNames('');
    form.resetFields();
  };
   const validatorValue = async (_: any, value: string) => {
    const promise = Promise;
    if(Number.parseInt(value)>999999999999){
      return promise.reject("值不能超过99999999999");
    }
  
    if(_.field=='maxValue'&&Number.parseInt(value)<Number.parseInt(form.getFieldValue('minValue'))){
      return promise.reject("最大值不能小于最小值");
    }
    return promise.resolve();
  };

  const changeRole =  (e) => {

    
    setValueRole(e.target.value);
    if(e.target.value=="高于"){
      setSymbolEnum(['>','>='])
    }else if(e.target.value=="低于"){
      setSymbolEnum(['<=','<'])
    }
  };

  return (
    <Modal
      width={640}
      destroyOnClose
      title="新增任务规则"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Form {...formLayout}
        form={form}
        initialValues={formVals}>
      <FormItem
            label="设备"
            rules={[{ required:true, message: '请选择设备' }]}
        >
          <Input placeholder="请选择设备" value={selectedNames}   onClick={() => handleDeviceModalVisible(true)}  />
        </FormItem>
        <FormItem
          label="变量"
          name="attrId"
          rules={[{ required: true}]}
        >
          <Select placeholder="请选择">
            {attrList.map((item) => (
              <Option key={item.attrId+''} value={item.attrId+'' ?? ''}>
                {item.browseName}
              </Option>
            ))}
          </Select>
        </FormItem>
        {/* <FormItem
          label="状态"
          name="useState"
        >
          <Radio.Group>
            <Radio value={1} >
              启用
            </Radio>
            <Radio value={0}>
             不启用
            </Radio>
          </Radio.Group>
        </FormItem> */}
        <FormItem
          label="联动规则"
          name="valueRole"
        >
          <Radio.Group onChange={(e)=>changeRole(e)}>
            <Radio value={'高于'} >
            高于
            </Radio>
            <Radio value={'介于'}>
             介于
            </Radio>
            <Radio value={'低于'}>
             低于
            </Radio>
          </Radio.Group>
        </FormItem>
        {valueRole!='介于'?
        <FormItem
          label="数值比较符号"
          name="symbol"
          rules={[{ required: true}]}
        >
          <Select placeholder="请选择">
            {symbolEnum.map((item) => (
              <Option key={item} value={item}>
                {item}
              </Option>
            ))}
          </Select>
        </FormItem>  :null}
        {valueRole!='低于'?
        <FormItem
          label="最小值"
          name="minValue"
          
          rules={[{ required:true, message: '请输入最小值' }, { validator: validatorValue}]}
        
        >
         <Input type="number" placeholder="请输入最小值"   />
        </FormItem>
        :null}
        {valueRole!='高于'?
        <FormItem
          label="最大值"
          name="maxValue"
        rules={[{ required:true, message: '请输入最大值' }, { validator: validatorValue}]}
        
        ><Input type="number" placeholder="请输入最大值"   />
       
        </FormItem>:null}
        <FormItem
          label="或并关系"
          name="andOr"
        >
          <Radio.Group>
            <Radio value={'and'} >
              并且
            </Radio>
            <Radio value={'or'}>
              或者
            </Radio>
          </Radio.Group>
        </FormItem>
       
      </Form>
     <SelectDeviceModal
       onSubmit={async (ids,names,typeId) => {
          setSelectedKeys(ids);
          setSelectedNames(names);
          var attrData=[];
          if(ids.length>1){
             attrData= await getAttrData(typeId,null);
          }else{
             attrData= await getAttrData(typeId,ids[0]);
            }
         
         
          setAttrList(attrData);
          handleDeviceModalVisible(false);
          }}
        onCancel={() => handleDeviceModalVisible(false)}
        modalVisible={selectDeviceModalVisible}
        deviceList={deviceList}
        // selectionType={'radio'}
      />
    </Modal>
  );
};



export default CreateForm;
